<template>
  <div class="login" @keydown.enter="handleSubmit">
    <div class="login-con">
      <Card icon="log-in" :bordered="false">
        <p slot="title">
            {{$t('login.title')}}
        </p>
        <div class="form-con">
          <Form ref="loginForm" :model="form">
            <FormItem prop="userName">
              <Input v-model="form.userName.value" :placeholder="form.userName.placeholder" :rules="form.userName.rule">
                <span slot="prepend">
                  <Icon :size="16" type="ios-person"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input type="password" v-model="form.password.value" :placeholder="form.password.placeholder" :rules="form.password.rule">
                <span slot="prepend">
                  <Icon :size="16" type="ios-lock"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem>
              <Button @click="handleSubmit" type="primary" long>{{ $t("login.loginBtn")}}</Button>
            </FormItem>
          </Form>
          <p class="login-tip">{{ $t("login.loginTip") }}</p>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import ValidatorRule from "@/filters/validator-rule";
import { mapActions } from "vuex";
export default {
  name: "login",
  components: {},
  data() {
    return {
      form: {
        userName: {
          name: "userName",
          value: "super_admin",
          placeholder: this.$t("login.placeholderUsername"),
          rule: ValidatorRule.user
        },
        password: {
          name: "password",
          value: "",
          placeholder: this.$t("login.placeholderPassword"),
          rule: ValidatorRule.password
        },
        wpbool: true
      }
    };
  },

  methods: {
    ...mapActions(["handleLogin", "getUserInfo"]),
    handleSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          let userName = this.form.userName.value,
            passWord = this.form.password.value;
          this.handleLogin({ userName, passWord }).then(res => {
            if (res) {
              this.getUserInfo().then(res => {
                if (res) {
                  this.$router.push({
                    name: "home"
                  });
                }
              });
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="less" >
@import "./login.less";
</style>
